var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);

import {
    Button,
    Checkbox,
    Dropdown,
    Icon,
    Menu,
    Modal,
    Select,
    Table,
    Tooltip,
    notification,
} from 'antd';

const {Column, ColumnGroup} = Table;

const ModificationOfCommodityInformation = React.createClass({
    submit:function(){
        var _this = this;
         if ($('#stage-goods-name').val() != "" && $('#stage-price').val() != "" && $('#stage-stock').val() != "" && $('#stage-details').val() != "" && $('#stage-category').val() != "" && $('#stage-describe').val() != ""){
             $.ajax({
                        type: "Patch",
                        url: "/api/Goods/ModificationOfCommodityInformation",
                        headers: {
                            Authorization: "Bearer " + mytoken.access_token
                        },
                        data: JSON.stringify({
                            GoodsId:$('#stage-goods-id').val(),
                            GoodsName: $('#stage-goods-name').val(),
                            Price: $('#stage-price').val(),
                            Stock: $('#stage-stock').val(),
                            Details: $('#stage-details').val(),
                            Category: $('#stage-category').val(),
                            Describe: $('#stage-describe').val()
                        }),
                        dataType: "json",
                        contentType: 'application/json',
                        success: function (data) {
                            if(data !=null){
                                _this.setState({goods:data,visible: false}); 
                                notification.open({message: '操作提示', description: '修改成功', placement: 'bottomRight', type: 'success'});
                            }                        
                        },
                        error: function (msg) {
                            alert("出错了");
                        }
                    });
         }
    },
    change: function (value) {
        $('#stage-goods-id').val(value.GoodsId);
        $('#stage-goods-name').val(value.GoodsName);
        $('#stage-price').val(value.Price);
        $('#stage-stock').val(value.Stock);
        $('#stage-details').val(value.Details);
        $('#stage-category').val(value.Category);
        $('#stage-describe').val(value.Describe);
        this.setState({visible: true})
    },
    showModal: function () {
        this.setState({visible: true});
    },
    handleOk: function () {
        this.setState({visible: false});
    },
    handleCancel: function () {
        this.setState({visible: false});
    },
    getInitialState: function () {
        return {goods: [], visible: false}
    },
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Goods/GetAllGoodsInfo",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    _this.setState({goods: data});
                } else {
                    alert("商品信息获取失败");
                }
            },
            error: function (msg) {
                alert(msg);
            }
        });

    },
    render() {
        return (
            <div >
                <section className="content-header">
                    <h1>
                        后台管理
                        <small>商品信息修改</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">商品信息</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">商品信息</h3>
                        <div className="box-tools pull-right">
                            <span className="label label-primary">修改信息</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <Table rowKey="GoodsId" dataSource={this.state.goods}>
                            <Column
                                title="操作"
                                key="GoodsId"
                                render={(text, record) => (
                                <Button
                                    type="dashed"
                                    onClick={this
                                    .change
                                    .bind(this, record)}>修改</Button>
                            )}/>
                            <Column title="商品名" dataIndex="GoodsName" key="GoodsName"/>
                            <Column title="商品价格" dataIndex="Price" key="Price"/>
                            <Column title="库存" dataIndex="Stock" key="Stock"/>
                            <Column title="商品分类" dataIndex="Category" key="Category"/>
                            <Column title="商品描述" dataIndex="Describe" key="Describe" width="300"/>
                            <Column title="商品细节" dataIndex="Details" key="Details" width="300"/>
                            <Column title="添加时间" dataIndex="AddTime" key="AddTime"/>

                        </Table>
                    </div>
                    <div className="box-footer">
                        <Modal
                            title="商品信息修改"
                            visible={this.state.visible}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                            footer={[
                                    <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
                                     <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.submit}> 修改</Button>]}
                            >
                            <input id="stage-goods-id" type ="hidden"/>
                            <table className="table">
                                <caption>
                                    修改商品信息
                                </caption>
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>信息</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <h4>
                                                <span className="label label-primary">商品名称</span>
                                            </h4>
                                        </td>
                                        <td>
                                            <div className="form-group">

                                                <input
                                                    type="text"
                                                    className="form-control"
                                                    id="stage-goods-name"
                                                    name="GoodsName"
                                                    placeholder="请输入名称"/>
                                            </div>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4>
                                                <span className="label label-primary">商品分类</span>
                                            </h4>
                                        </td>
                                        <td>
                                            <div className="form-group">

                                                <select id="stage-category" className="form-control">
                                                    <option>男士</option>
                                                    <option>女士</option>
                                                    <option>儿童</option>
                                                </select>
                                            </div>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4>
                                                <span className="label label-primary">商品价格</span>
                                            </h4>
                                        </td>
                                        <td>
                                            <div className="form-group">
                                                <input
                                                    type="text"
                                                    className="form-control"
                                                    id="stage-price"
                                                    name="Price"
                                                    placeholder="请输入价格"/>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4>
                                                <span className="label label-primary">商品库存</span>
                                            </h4>
                                        </td>
                                        <td>
                                            <div className="form-group">

                                                <input
                                                    type="text"
                                                    className="form-control"
                                                    id="stage-stock"
                                                    name="Stock"
                                                    placeholder="请输入库存"/>

                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4>
                                                <span className="label label-primary">商品细节</span>
                                            </h4>
                                        </td>
                                        <td>
                                            <div className="form-group">
                                                <label htmlFor="name">添加细节</label>
                                                <textarea className="form-control" id="stage-details" name="Details" rows="3"></textarea>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4>
                                                <span className="label label-primary">商品描述</span>
                                            </h4>
                                        </td>
                                        <td>
                                            <div className="form-group">
                                                <label htmlFor="name">添加描述</label>
                                                <textarea className="form-control" id="stage-describe" name="Describe" rows="3"></textarea>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </Modal>
                    </div>
                </div>
            </div>
        )
    }
})
module.exports = ModificationOfCommodityInformation;